<template>
  <el-form ref="formEdit" :model="formData" label-width="80px">
    <el-row v-for="i in rowCount" :key="i">
      <el-col :span="colSpan" v-for="j in columns" :key="j">
        <template v-if="showEditItem(i, j)">
          <edit-item
            :name="getKey(i, j)"
            :label="getOption(i, j).label"
            :accept="getOption(i, j).accept"
            :autoParams="getOption(i, j).autoParams"
            :autoUrl="getOption(i, j).autoUrl"
            :dictName="getOption(i, j).dictName"
            :ellipsis="getOption(i, j).ellipsis"
            :filter="getOption(i, j).filter"
            :max="getOption(i, j).max"
            :maxlength="getOption(i, j).maxlength"
            :min="getOption(i, j).min"
            :minlength="getOption(i, j).minlength"
            :multiple="getOption(i, j).multiple"
            :placeholder="getOption(i, j).placeholder"
            :range="getOption(i, j).range"
            :readonly="getOption(i, j).readonly"
            :showSecond="getOption(i, j).showSecond"
            :size="size"
            :step="getOption(i, j).step"
            :type="getOption(i, j).type"
            :unit="getOption(i, j).unit"
            :uploadUrl="getOption(i, j).uploadUrl"
            :width="getOption(i, j).width"
            v-model="formData[getKey(i, j)]"
            @change="itemChange"
          />
        </template>
      </el-col>
    </el-row>
    <el-row v-if="showToolbar">
      <el-col :span="24" class="toolbar">
        <el-button
          :size="size"
          type="primary"
          icon="el-icon-success"
          v-if="buttons.indexOf('submit') >= 0"
          @click="submit"
          >保存</el-button
        >
        <el-button
          :size="size"
          type="danger"
          icon="el-icon-refresh-left"
          v-if="buttons.indexOf('reset') >= 0"
          @click="reset"
          >重置</el-button
        >
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import EditItem from "../form/EditItem.vue";
export default {
  components: { EditItem },
  model: {
    prop: "form",
    methods: ["submit", "reset"],
  },
  props: {
    showToolbar: { type: Boolean, default: true },
    buttons: {
      type: Array,
      default: () => ["submit", "reset"],
      validator: (value) =>
        value.indexOf("submit") >= 0 || value.indexOf("reset") >= 0,
    },
    tableName: String,
    sysName:String,
    options: { type: Object, required: true },
    columns: {
      type: Number,
      default: 1,
      validator: (value) => value <= 4,
    },
    form: { type: Object, required: true },
    rules: Object,
    labelWidth: { type: String, default: "100px" },
    size: {
      type: String,
      validator: function(value) {
        return (
          ["medium", "small", "mini"].findIndex((item) => item == value) >= 0
        );
      },
      default: "medium",
    },
  },
  data() {
    return {
      num: 0,
      formData: { ...this.form },
    };
  },
  computed: {
    rowCount() {
      const count = Object.keys(this.options).length;
      return Math.ceil(count / this.columns);
    },
    colSpan() {
      return 24 / this.columns;
    },
  },
  methods: {
    getKey(i, j) {
      const key = Object.keys(this.options)[(i - 1) * this.columns + (j - 1)];
      if (typeof this.formData != "undefined") {
        if (!this.formData.hasOwnProperty(key)) {
          this.formData[key] = "";
        }
      }else{
        this.formData = {}
        this.formData[key]=""
      }

      return key;
    },
    getOption(i, j) {
      const v = (i - 1) * this.columns + (j - 1);
      const opt = this.options[Object.keys(this.options)[v]];
      if (typeof opt != "undefined") {
        return opt;
      }
    },
    showEditItem(i, j) {
      const v = (i - 1) * this.columns + (j - 1);
      if (v < Object.keys(this.options).length) {
        return true;
      }
      return false;
    },
    submit(fn) {
      if (typeof this.tableName != "undefined" && typeof this.sysName != "undefined") {
        this.$api.save(this.sysName,this.tableName, this.formData).then((result) => {
          fn(result);
        });
      } else {
        this.$msg.error("表单域没有定义sysName和tableName属性，请联系管理员！");
      }
    },
    reset() {
      this.$refs.formEdit.resetFields();
      this.formData = {};
    },
    itemChange(val) {
      this.$emit("input", val);
    },
  },
  watch: {
    form(val) {
      this.reset();
      this.formData = val;
    },
  },
};
</script>

<style lang="less" scoped>
.toolbar {
  text-align: center;
  .el-button {
    margin-right: 10px;
    margin-left: 10px;
  }
}
</style>
